<!DOCTYPE html>

<html>
<head>
  <title>entityManagerView.coffee</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" media="all" href="public/stylesheets/normalize.css" />
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div class="container">
    <div class="page">

      <div class="header">
        
          <h1>entityManagerView.coffee</h1>
        

        
          <div class="toc">
            <h3>Table of Contents</h3>
            <ol>
              
                
                <li>
                  <a class="source" href="admin.html">
                    admin.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.auditData.html">
                    api.auditData.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.auditEvent.html">
                    api.auditEvent.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.html">
                    api.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.entity.html">
                    api.entity.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.map.html">
                    api.map.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.server.html">
                    api.server.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.variable.html">
                    api.variable.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.view.html">
                    api.view.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="app.instance.html">
                    app.instance.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="appjs.html">
                    appjs.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="data.html">
                    data.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="dataUtil.html">
                    dataUtil.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="manager.html">
                    manager.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="messages.html">
                    messages.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditData.html">
                    auditData.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditEvent.html">
                    auditEvent.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="base.html">
                    base.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityDefinition.html">
                    entityDefinition.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityObject.html">
                    entityObject.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="eventAction.html">
                    eventAction.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="eventRule.html">
                    eventRule.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="link.html">
                    link.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="map.html">
                    map.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shape.html">
                    shape.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="user.html">
                    user.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="userSettings.html">
                    userSettings.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="variable.html">
                    variable.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="adminRoutes.html">
                    adminRoutes.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="appRoutes.html">
                    appRoutes.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="settings.html">
                    settings.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="sockets.html">
                    sockets.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="tutorial.html">
                    tutorial.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="vectors.html">
                    vectors.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="statusTabView.html">
                    statusTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="toolsTabView.html">
                    toolsTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="usersTabView.html">
                    usersTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="adminView.html">
                    adminView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="alertView.html">
                    alertView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditDataManagerView.html">
                    auditDataManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditEventManagerView.html">
                    auditEventManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="baseView.html">
                    baseView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="createMapView.html">
                    createMapView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityManagerView.html">
                    entityManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="footerView.html">
                    footerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="helpView.html">
                    helpView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entitiesTabView.html">
                    entitiesTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="inspectorTabView.html">
                    inspectorTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="mapTabView.html">
                    mapTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeTabView.html">
                    shapeTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="controlsView.html">
                    controlsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="labelEditView.html">
                    labelEditView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkCreatorView.html">
                    linkCreatorView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkLabelsView.html">
                    linkLabelsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkView.html">
                    linkView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeLabelsView.html">
                    shapeLabelsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeView.html">
                    shapeView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapesMoverView.html">
                    shapesMoverView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="mapView.html">
                    mapView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="menuView.html">
                    menuView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="overlayView.html">
                    overlayView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="scriptEditorView.html">
                    scriptEditorView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="settingsView.html">
                    settingsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="startView.html">
                    startView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="variableManagerView.html">
                    variableManagerView.coffee
                  </a>
                </li>
              
            </ol>
          </div>
        
      </div>

      
        
        <h2 id="entity-manager-view">ENTITY MANAGER VIEW</h2>

        
      
        
        <p>Represents the entities manager overlay.</p>

        
          <div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">SystemApp</span>.<span class="title">EntityManagerView</span> <span class="keyword">extends</span> <span class="title">SystemApp</span>.<span class="title">OverlayView</span></span>

    <span class="attribute">$txtCreate</span>: <span class="literal">null</span>                <span class="comment"># the text input used to create a new entity definition</span>
    <span class="attribute">$butCreate</span>: <span class="literal">null</span>                <span class="comment"># the button used to create a new entity definition</span>
    <span class="attribute">$txtDescription</span>: <span class="literal">null</span>           <span class="comment"># the "Description" textbox when editing an entity definition</span>
    <span class="attribute">$txtSourceUrl</span>: <span class="literal">null</span>             <span class="comment"># the "Source URL" textbox when editing an entity definition</span>
    <span class="attribute">$txtRefresh</span>: <span class="literal">null</span>               <span class="comment"># the "Refresh interval" textbox when editing an entity definition</span>
    <span class="attribute">$txtIdAttribute</span>: <span class="literal">null</span>           <span class="comment"># the "Object's ID attribute" textbox when editing an entity definition</span>
    <span class="attribute">$txtTitleAttribute</span>: <span class="literal">null</span>        <span class="comment"># the "Object's Title attribute" textbox when editing an entity definition</span>
    <span class="attribute">$txtShapeSizeX</span>: <span class="literal">null</span>            <span class="comment"># the shape template "Size X" textbox</span>
    <span class="attribute">$txtShapeSizeY</span>: <span class="literal">null</span>            <span class="comment"># the shape template "Size Y" textbox</span>
    <span class="attribute">$txtShapeBackground</span>: <span class="literal">null</span>       <span class="comment"># the shape template "Background" textbox</span>
    <span class="attribute">$txtShapeForeground</span>: <span class="literal">null</span>       <span class="comment"># the shape template "Label colour" textbox</span>
    <span class="attribute">$txtShapeTitleForeground</span>: <span class="literal">null</span>  <span class="comment"># the shape template "Title foreground" textbox</span>
    <span class="attribute">$txtShapeStroke</span>: <span class="literal">null</span>           <span class="comment"># the shape template "Border colour" textbox</span>
    <span class="attribute">$cboShapeStrokeWidth</span>: <span class="literal">null</span>      <span class="comment"># the shape template "Border width" combobox</span>
    <span class="attribute">$cboShapeFontSize</span>: <span class="literal">null</span>         <span class="comment"># the shape template "Font size" combobox</span>
    <span class="attribute">$cboShapeOpacity</span>: <span class="literal">null</span>          <span class="comment"># the shape template "Opacity" combobox</span>
    <span class="attribute">$chkShapeRoundedCorners</span>: <span class="literal">null</span>   <span class="comment"># the shape template "Rounded corners" checkbox</span>
    <span class="attribute">$shapePreview</span>: <span class="literal">null</span>             <span class="comment"># the shape template preview</span></pre></div>
        
      
        
        <h2 id="init-and-dispose">INIT AND DISPOSE</h2>

        
      
        
        <p>Init the Entity Manager overlay view.</p>

        
          <div class='highlight'><pre>    <span class="attribute">initialize</span>:<span class="function"> =&gt;</span>
        <span class="property">@currentSettings</span> = SystemApp.Settings.entityDefinition
        <span class="property">@overlayInit</span> <span class="string">"#entitymanager"</span>
        <span class="property">@setDom</span>()
        <span class="property">@setEvents</span>()</pre></div>
        
      
        
        <p>Dispose the Entity Manager view.</p>

        
          <div class='highlight'><pre>    <span class="attribute">dispose</span>:<span class="function"> =&gt;</span>
        <span class="property">@baseDispose</span>()</pre></div>
        
      
        
        <p>Set the DOM elements cache.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setDom</span>:<span class="function"> =&gt;</span>
        <span class="property">@$menuItem</span> = $ <span class="string">"#menu-entities"</span>
        <span class="property">@$modelsList</span> = $ <span class="string">"#entitymanager-list"</span>
        <span class="property">@$txtCreate</span> = $ <span class="string">"#entitymanager-txt-create"</span>
        <span class="property">@$butCreate</span> = $ <span class="string">"#entitymanager-but-create"</span></pre></div>
        
      
        
        <p>Input fields for the entity definition properties.</p>

        
          <div class='highlight'><pre>        <span class="property">@$txtDescription</span> = $ <span class="string">"#entitymanager-txt-description"</span>
        <span class="property">@$txtSourceUrl</span> = $ <span class="string">"#entitymanager-txt-sourceurl"</span>
        <span class="property">@$txtRefresh</span> = $ <span class="string">"#entitymanager-txt-refresh"</span>
        <span class="property">@$txtIdAttribute</span> = $ <span class="string">"#entitymanager-txt-idattribute"</span>
        <span class="property">@$txtTitleAttribute</span> = $ <span class="string">"#entitymanager-txt-titleattribute"</span></pre></div>
        
      
        
        <p>Input fields for shape template.</p>

        
          <div class='highlight'><pre>        <span class="property">@$txtShapeSizeX</span> = $ <span class="string">"#entitymanager-txt-shape-sizex"</span>
        <span class="property">@$txtShapeSizeY</span> = $ <span class="string">"#entitymanager-txt-shape-sizey"</span>
        <span class="property">@$txtShapeBackground</span> = $ <span class="string">"#entitymanager-txt-shape-background"</span>
        <span class="property">@$txtShapeForeground</span> = $ <span class="string">"#entitymanager-txt-shape-foreground"</span>
        <span class="property">@$txtShapeTitleForeground</span> = $ <span class="string">"#entitymanager-txt-shape-titleforeground"</span>
        <span class="property">@$txtShapeStroke</span> = $ <span class="string">"#entitymanager-txt-shape-stroke"</span>
        <span class="property">@$cboShapeStrokeWidth</span> = $ <span class="string">"#entitymanager-cbo-shape-strokewidth"</span>
        <span class="property">@$cboShapeFontSize</span> = $ <span class="string">"#entitymanager-cbo-shape-fontsize"</span>
        <span class="property">@$cboShapeOpacity</span> = $ <span class="string">"#entitymanager-cbo-shape-opacity"</span>
        <span class="property">@$chkShapeRoundedCorners</span> = $ <span class="string">"#entitymanager-chk-shape-roundedcorners"</span></pre></div>
        
      
        
        <p>The shape preview.</p>

        
          <div class='highlight'><pre>        <span class="property">@$shapePreview</span> = $ <span class="string">"#entitymanager-shape-preview &gt; div"</span></pre></div>
        
      
        
        <p>Add dynamic attributes to input fields.</p>

        
          <div class='highlight'><pre>        <span class="property">@$txtRefresh</span>.attr <span class="string">"min"</span>, SystemApp.Settings.entityDefinition.minRefreshInterval
        <span class="property">@$txtRefresh</span>.attr <span class="string">"max"</span>, SystemApp.Settings.entityDefinition.maxRefreshInterval</pre></div>
        
      
        
        <p>Bind events to the DOM. This will effectively update the <code>model</code> automatically
whenever any input field value gets changed.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setEvents</span>:<span class="function"> =&gt;</span>
        <span class="property">@$butCreate</span>.click <span class="property">@createEntityClick</span>
        <span class="property">@$txtCreate</span>.keyup <span class="property">@createEntityKeyUp</span>

        <span class="property">@$txtDescription</span>.change <span class="property">@inputOnChange</span>
        <span class="property">@$txtSourceUrl</span>.change <span class="property">@inputOnChange</span>
        <span class="property">@$txtRefresh</span>.change <span class="property">@inputOnChange</span>
        <span class="property">@$txtIdAttribute</span>.change <span class="property">@inputOnChange</span>
        <span class="property">@$txtTitleAttribute</span>.change <span class="property">@inputOnChange</span>

        <span class="property">@$txtShapeSizeX</span>.change <span class="property">@inputOnChangeShape</span>
        <span class="property">@$txtShapeSizeY</span>.change <span class="property">@inputOnChangeShape</span>
        <span class="property">@$txtShapeBackground</span>.change <span class="property">@inputOnChangeShape</span>
        <span class="property">@$txtShapeForeground</span>.change <span class="property">@inputOnChangeShape</span>
        <span class="property">@$txtShapeTitleForeground</span>.change <span class="property">@inputOnChangeShape</span>
        <span class="property">@$txtShapeStroke</span>.change <span class="property">@inputOnChangeShape</span>
        <span class="property">@$cboShapeStrokeWidth</span>.change <span class="property">@inputOnChangeShape</span>
        <span class="property">@$cboShapeFontSize</span>.change <span class="property">@inputOnChangeShape</span>
        <span class="property">@$cboShapeOpacity</span>.change <span class="property">@inputOnChangeShape</span>
        <span class="property">@$chkShapeRoundedCorners</span>.change <span class="property">@inputOnChangeShape</span></pre></div>
        
      
        
        <h2 id="entity-list">ENTITY LIST</h2>

        
      
        
        <p>Clear the current view by setting the <code>model</code> to null
and emptying the <code>$modelsList</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">clear</span>:<span class="function"> =&gt;</span>
        <span class="property">@model</span> = <span class="literal">null</span>
        <span class="property">@$modelsList</span>.empty()
        <span class="property">@clearTextInputs</span>()</pre></div>
        
      
        
        <p>Clear the text input fields.</p>

        
          <div class='highlight'><pre>    <span class="attribute">clearTextInputs</span>:<span class="function"> =&gt;</span>
        <span class="property">@$txtCreate</span>.val <span class="string">""</span></pre></div>
        
      
        
        <p>Bind all <a href="entityDefinition.html">EntityDefinitions</a> from the <a href="data.html">data store</a>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindEntities</span>:<span class="function"> =&gt;</span>
        <span class="property">@clear</span>()
        <span class="property">@addToModelsList</span> item <span class="keyword">for</span> item <span class="keyword">in</span> SystemApp.Data.entities.models</pre></div>
        
      
        
        <h2 id="creating-entities">CREATING ENTITIES</h2>

        
      
        
        <p>When user clicks the &quot;Add&quot; entity button, add a new record to the
<a href="data.html">Data.entities</a> and move focus to the properties form.</p>

        
          <div class='highlight'><pre>    <span class="attribute">createEntityClick</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        newId = <span class="property">@$txtCreate</span>.val()</pre></div>
        
      
        
        <p>The entity definition ID must have at least 2 chars.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> newId.length &lt; <span class="number">2</span>
            <span class="property">@warnField</span> <span class="property">@$txtCreate</span>
            <span class="keyword">return</span>
        <span class="keyword">else</span>
            newId = SystemApp.DataUtil.normalize newId, <span class="literal">true</span>

        SystemApp.Data.entities.create {<span class="attribute">friendlyId</span>: newId}, {<span class="attribute">wait</span>: <span class="literal">true</span>}
        <span class="property">@clearTextInputs</span>()</pre></div>
        
      
        
        <p>If the <code>$txtCreate</code> field has focus, pressing Enter will call the <code>click</code>
event on the <code>$butCreate</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">createEntityKeyUp</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        <span class="keyword">if</span> e.keyCode <span class="keyword">is</span> <span class="number">13</span>
            <span class="property">@$butCreate</span>.click()</pre></div>
        
      
        
        <h2 id="properties-and-shape-template">PROPERTIES AND SHAPE TEMPLATE</h2>

        
      
        
        <p>Bind entity properties and refresh the shape template.</p>

        
          <div class='highlight'><pre>    <span class="attribute">onBindModel</span>:<span class="function"> =&gt;</span>
        <span class="property">@bindEntityProperties</span>()
        <span class="property">@bindShapeProperties</span>()</pre></div>
        
      
        
        <p>Delay the <code>updateShapeTemplate</code> so it can property calculate width and height.</p>

        
          <div class='highlight'><pre>        setTimeout <span class="property">@updateShapeTemplate</span>, <span class="number">100</span></pre></div>
        
      
        
        <p>Bind the properties (ID, url, description etc...) from the specified
<a href="entityDefinition.html">Entity Definition</a> to the form.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindEntityProperties</span>:<span class="function"> =&gt;</span>
        <span class="keyword">return</span> <span class="keyword">if</span> <span class="keyword">not</span> <span class="property">@model</span>?

        <span class="property">@$txtDescription</span>.val <span class="property">@model</span>.description()
        <span class="property">@$txtSourceUrl</span>.val <span class="property">@model</span>.sourceUrl()
        <span class="property">@$txtRefresh</span>.val <span class="property">@model</span>.refreshInterval()
        <span class="property">@$txtIdAttribute</span>.val <span class="property">@model</span>.objectIdAttribute()
        <span class="property">@$txtTitleAttribute</span>.val <span class="property">@model</span>.objectTitleAttribute()</pre></div>
        
      
        
        <p>Bind the shape template properties for the selected <a href="entityDefinition.html">Entity Definition</a>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindShapeProperties</span>:<span class="function"> =&gt;</span>
        <span class="keyword">return</span> <span class="keyword">if</span> <span class="keyword">not</span> <span class="property">@model</span>?

        <span class="property">@$txtShapeSizeX</span>.val <span class="property">@model</span>.shapeSizeX()
        <span class="property">@$txtShapeSizeY</span>.val <span class="property">@model</span>.shapeSizeY()
        <span class="property">@$txtShapeBackground</span>.val <span class="property">@model</span>.shapeBackground()
        <span class="property">@$txtShapeForeground</span>.val <span class="property">@model</span>.shapeForeground()
        <span class="property">@$txtShapeTitleForeground</span>.val <span class="property">@model</span>.shapeTitleForeground()
        <span class="property">@$txtShapeStroke</span>.val <span class="property">@model</span>.shapeStroke()
        <span class="property">@$cboShapeStrokeWidth</span>.val <span class="property">@model</span>.shapeStrokeWidth()
        <span class="property">@$cboShapeFontSize</span>.val <span class="property">@model</span>.shapeFontSize()
        <span class="property">@$cboShapeOpacity</span>.val <span class="property">@model</span>.shapeOpacity()
        <span class="property">@$chkShapeRoundedCorners</span>.prop <span class="string">"checked"</span>, <span class="property">@model</span>.shapeRoundedCorners()</pre></div>
        
      
        
        <p>Update the div representing the shape template with the new values.
If not entity is being edited, hide the shape template preview.</p>

        
          <div class='highlight'><pre>    <span class="attribute">updateShapeTemplate</span>:<span class="function"> =&gt;</span>
        <span class="keyword">if</span> <span class="keyword">not</span> <span class="property">@model</span>?
            <span class="property">@$shapePreview</span>.hide()
            <span class="keyword">return</span>

        <span class="keyword">if</span> <span class="property">@model</span>.shapeRoundedCorners()
            borderRadius = <span class="string">"10px"</span>
        <span class="keyword">else</span>
            borderRadius = <span class="string">"0"</span>

        shapeCss =
            <span class="string">"background"</span>: <span class="property">@model</span>.shapeBackground()
            <span class="string">"border"</span>: <span class="string">"<span class="subst">#{<span class="property">@model</span>.shapeStrokeWidth()}</span>px solid <span class="subst">#{<span class="property">@model</span>.shapeStroke()}</span>"</span>
            <span class="string">"border-radius"</span>: borderRadius
            <span class="string">"font-size"</span>: <span class="string">"<span class="subst">#{<span class="property">@model</span>.shapeFontSize()}</span>px"</span>
            <span class="string">"height"</span>: <span class="property">@model</span>.shapeSizeY() * SystemApp.Settings.map.gridSizeY - <span class="property">@model</span>.shapeStrokeWidth()
            <span class="string">"opacity"</span>: <span class="property">@model</span>.shapeOpacity()
            <span class="string">"width"</span>: <span class="property">@model</span>.shapeSizeX() * SystemApp.Settings.map.gridSizeX - <span class="property">@model</span>.shapeStrokeWidth()

        titleCss =
            <span class="string">"color"</span>: <span class="property">@model</span>.shapeTitleForeground()

        labelCss =
            <span class="string">"color"</span>: <span class="property">@model</span>.shapeForeground()

        <span class="property">@$shapePreview</span>.show()
        <span class="property">@$shapePreview</span>.css shapeCss
        <span class="property">@$shapePreview</span>.children(<span class="string">"label"</span>).css titleCss
        <span class="property">@$shapePreview</span>.children(<span class="string">"span"</span>).css labelCss

        <span class="function"><span class="title">moveToCenter</span> = <span class="params">(i, label)</span> -&gt;</span>
            label = $(label)
            label.css <span class="string">"margin-left"</span>, label.outerWidth() / <span class="number">2</span> * -<span class="number">1</span> + <span class="string">"px"</span>

        <span class="function"><span class="title">moveToMiddle</span> = <span class="params">(i, label)</span> -&gt;</span>
            label = $(label)
            label.css <span class="string">"margin-top"</span>, label.outerHeight() / <span class="number">2</span> * -<span class="number">1</span> + <span class="string">"px"</span>

        $.each <span class="property">@$shapePreview</span>.find(<span class="string">".label-title,.label-top,.label-center,.label-bottom"</span>), moveToCenter
        $.each <span class="property">@$shapePreview</span>.find(<span class="string">".label-left,.label-center,.label-right"</span>), moveToMiddle</pre></div>
        
      
        
        <h2 id="updating-shape-properties">UPDATING SHAPE PROPERTIES</h2>

        
      
        
        <p>When user changes the value of shape related fields, do a <code>updateShapeTemplate</code>
and save the new value by calling the generic <code>inputOnChange</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">inputOnChangeShape</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        <span class="property">@inputOnChange</span> e
        <span class="property">@updateShapeTemplate</span>()</pre></div>
        
      
        
        <h2 id="show-and-hide">SHOW AND HIDE</h2>

        
      
        
        <p>Bind the <code>keyUp</code> event when overlay is shown.</p>

        
          <div class='highlight'><pre>    <span class="attribute">onShow</span>:<span class="function"> =&gt;</span>
        <span class="property">@bindEntities</span>()

        $(<span class="built_in">document</span>).keyup <span class="property">@hasModelListKeyUp</span>
        <span class="property">@listenTo</span> SystemApp.Data.entities, <span class="string">"add"</span>, <span class="property">@addToModelsList</span>
        <span class="property">@listenTo</span> SystemApp.Data.entities, <span class="string">"remove"</span>, <span class="property">@removeFromModelsList</span></pre></div>
        
      
        
        <p>Save the <code>model</code> (if there&#39;s one) when the overlay is closed,
and remove the <code>keyUp</code> from the document.</p>

        
          <div class='highlight'><pre>    <span class="attribute">onHide</span>:<span class="function"> =&gt;</span>
        $(<span class="built_in">document</span>).unbind <span class="string">"keyup"</span>, <span class="property">@hasModelListKeyUp</span>
        <span class="property">@stopListening</span>()

        <span class="property">@model</span>?.save()
        <span class="property">@model</span> = <span class="literal">null</span></pre></div>
        
      
      <div class="fleur">h</div>
    </div>
  </div>
</body>
</html>
